<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a>支付配置</a>
        <a><cite>新增支付接口</cite></a>
    </span>
</div>

<style>
    .layui-form-label {
        width:120px !important;
        margin-left:1%;
    }
    .layui-input-inline {
        width: 80% !important;
    }

    .layui-form-item {
        display: flex;
        align-items: center;
    }

    .layui-input-inline {
        flex: 1;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">支付接口</li>
            </ul>
            <div class="layui-tab-content">
                <form class="layui-form center">
                    <div class="layui-form-item">
                        <label class="layui-form-label">通道标识</label>
                        <div class="layui-input-inline" >
                            <select name="ifTypeCode" id="ifTypeCode" lay-filter="ifTypeCodeFilter">
                                <option value="">选择通道标识</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">通道编码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="ifCode" id="ifCode" placeholder="请输入通道编码" required lay-verify="required"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">通道名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="ifName" id="ifName" placeholder="请输入通道名称" required lay-verify="required"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label">支付类型</label>-->
<!--                        <div class="layui-input-inline" id="selectContainer">-->
<!--                            <select name="payType" id="payType" lay-filter="payTypeFilter">-->
<!--                                <option value="">选择对接接口</option>-->
<!--                            </select>-->
<!--                        </div>-->
<!--&lt;!&ndash;                        <div class="layui-input-inline">&ndash;&gt;-->
<!--&lt;!&ndash;                            <button type="button" class="layui-btn layui-btn-primary" id="addInterfaceBtn">添加对接接口</button>&ndash;&gt;-->
<!--&lt;!&ndash;                        </div>&ndash;&gt;-->
<!--                    </div>-->

<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label">应用场景</label>-->
<!--                        <div class="layui-input-inline" >-->
<!--                            <input type="radio" name="scene" title="移动APP" value="1" checked>-->
<!--                            <input type="radio" name="scene" title="移动网页" value="2" >-->
<!--                            <input type="radio" name="scene" title="PC网页" value="3" >-->
<!--                            <input type="radio" name="scene" title="微信公众平台" value="4" >-->
<!--                            <input type="radio" name="scene" title="手机扫码" value="5" >-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">扩展参数</label>
                        <div class="layui-input-inline">
                            <textarea name="extra" id="extra" placeholder="当支付类型为网银支付时,可配置支持的银行列表.格式如:[{'bank':'zhonghang','code':'300008'},{'bank':'nonghang','code':'300009'}]" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline" >
                            <input type="radio" name="status" title="开启" value="1" checked />
                            <input type="radio" name="status" title="关闭" value="0" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注信息</label>
                        <div class="layui-input-inline">
<!--                            <input type="text" name="remark" placeholder="请输入备注信息" autocomplete="off" class="layui-input">-->
                            <textarea name="remark" placeholder="请输入备注信息" autocomplete="off" class="layui-textarea" style="height: 100px;"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item mchIdItem" style="display: none;">
                        <label class="layui-form-label">商户ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="mchId" id="mchId" placeholder="只能在通道标识编辑" autocomplete="off" class="layui-input" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item mchKeyItem" style="display: none;">
                        <label class="layui-form-label">商户密钥</label>
                        <div class="layui-input-inline">
                            <input type="text" name="mchKey" id="mchKey" placeholder="只能在通道标识编辑" autocomplete="off" class="layui-input" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item reqUrlItem" style="display: none;">
                        <label class="layui-form-label">接口地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="reqUrl" id="reqUrl" placeholder="只能在通道标识编辑" autocomplete="off" class="layui-input" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item queryUrlItem" style="display: none;">
                        <label class="layui-form-label">查询地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="queryUrl" id="queryUrl" placeholder="只能在通道标识编辑" autocomplete="off" class="layui-input" disabled>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" lay-submit="" lay-filter="add">保存</button>
                            <a lay-href = "config/pay_interface/"  class="layui-btn ">返回</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form','table','util','admin',],function(){
        var form = layui.form
            , $ = layui.$
            , admin = layui.admin
            , layer = layui.layer
            , element = layui.element
            , table = layui.table;




        // 加载支接口类型
        admin.req({
            type: 'post',
            url: layui.setter.baseUrl + '/config/common/pay_interface_type_all',
            error: function(err){
                layer.alert(err);
            },
            success: function(res){
                if(res.code == 0){
                    var ifTypeList = res.data;
                    //遍历赋值
                    for(var i in ifTypeList){
                        $("#ifTypeCode").append('<option value= '+ifTypeList[i].ifTypeCode+'>'+ '[' +ifTypeList[i].ifTypeCode + '] ' + ifTypeList[i].ifTypeName+'</option>');
                    }
                    form.render('select');
                }
            }
        });

        // 加载支付类型
        admin.req({
            type: 'post',
            url: layui.setter.baseUrl + '/config/common/pay_type_all',
            error: function(err){
                layer.alert(err);
            },
            success: function(res){
                if(res.code == 0){
                    var payTypeList = res.data;
                    //遍历赋值
                    for(var i in payTypeList){
                        $("#payType").append('<option value= '+payTypeList[i].payTypeCode+'>'+payTypeList[i].payTypeName+'</option>');
                    }
                    // 设置支付类型的默认值为10
                    form.render('select');
                }
            }
        });

        form.render();

        // 当点击微信渠道配置按钮保存的时候
        form.on('submit(add)', function(data){
            // // 获取接口代码和接口名称
            // var ifCode = $('#ifCode').val();
            // var ifName = $('#ifName').val();
            console.dir(data)
            data.field.ifName=data.field.ifName+'[' + data.field.ifCode + '] '

            // 获取当前时间
            var currentTime = new Date();
            // 生成随机数（假设范围在100到999之间）
            var randomValue = Math.floor(Math.random() * 900) + 100;
            // 拼接当前时间和随机数生成接口代码
            var interfaceCode = currentTime.getTime() + randomValue;
            // 将生成的接口代码赋值给接口代码输入框
            data.field.ifCode=interfaceCode;
            console.dir(data)
            if (data.field.payType==null){
                data.field.payType=10;
            }
            element.render('breadcrumb', 'breadcrumb');//渲染导航信息
            console.dir(data.field)
            admin.req({
                type: 'post',
                url: layui.setter.baseUrl + '/config/pay_interface/add',
                data: data.field,
                error: function(err){
                    layer.alert(err.msg,{title:"请求失败"})
                },
                success: function(res){
                    if(res.code == 0){
                        layer.alert(res.msg, {title: '保存成功'},function(index){
                            layer.close(index);
                            location.hash = '/config/pay_interface/';
                        });
                    }
                }
            })
        })


        // 监听接口类型的 change 事件
        form.on('select(ifTypeCodeFilter)', function(data) {
            var ifTypeCode = data.value;
            // 调用接口获取商户ID、商户密钥、接口地址和查询地址
            admin.req({
                type: 'post',
                url: layui.setter.baseUrl + '/config/pay_interface_type/get',
                data: {ifTypeCode: ifTypeCode},
                error: function(err){
                    layer.alert(err.msg, {title: "请求失败"});
                },
                success: function(res){
                    if(res.code == 0){
                        var payInterfaceType = res.data;
                        // 将商户ID、商户密钥、接口地址和查询地址显示在相应的输入框中
                        $(".mchIdItem").show();
                        $(".mchKeyItem").show();
                        $(".reqUrlItem").show();
                        $(".queryUrlItem").show();
                        $("#mchId").val(payInterfaceType.ifTypeMchId);
                        $("#mchKey").val(payInterfaceType.ifTypeAppKey);
                        $("#reqUrl").val(payInterfaceType.ifTypeReqUrl);
                        $("#queryUrl").val(payInterfaceType.ifTypeQueryUrl);

                        // 刷新表单渲染
                        form.render();
                    }
                }
            });
        });

        // // 监听添加新接口按钮的点击事件
        // $('#addInterfaceBtn').on('click', function() {
        //     var formHtml = '<form class="layui-form" id="addInterfaceForm" style="padding: 20px;">' +
        //         '<div class="layui-form-item">' +
        //         '<label class="layui-form-label" style="width: 100px;">对接产品代码</label>' +
        //         '<div class="layui-input-block" style="margin-left: 50px;">' +
        //         '<input type="text" name="productCode" id="productCode" placeholder="请输入对接产品代码" required lay-verify="required" autocomplete="off" class="layui-input">' +
        //         '</div>' +
        //         '</div>' +
        //         '<div class="layui-form-item">' +
        //         '<label class="layui-form-label" style="width: 100px;">对接产品名称</label>' +
        //         '<div class="layui-input-block" style="margin-left: 50px;">' +
        //         '<input type="text" name="productName" id="productName" placeholder="请输入对接产品名称" required lay-verify="required" autocomplete="off" class="layui-input">' +
        //         '</div>' +
        //         '</div>' +
        //         '</form>';
        //
        //     layer.open({
        //         type: 1,
        //         title: '添加对接接口',
        //         content: formHtml,
        //         area: ['500px', '300px'],
        //         btn: ['保存', '取消'],
        //         move: true, // 禁止拖动
        //         success: function(layero, index){
        //             $(layero).children('.layui-layer-content').css('overflow', 'visible'); // 解决内容溢出问题
        //         },
        //         yes: function(index, layero) {
        //             // 获取输入的对接产品代码和对接产品名称
        //             var productCode = $('#productCode').val();
        //             var productName = $('#productName').val();
        //
        //             var payTypeName ='[' + productCode + ']'+productName;
        //             var data = {
        //                 payTypeName: payTypeName,
        //                 type:1,
        //                 status :1
        //                 // 其他字段根据后端接口需求添加
        //             };
        //
        //             console.dir(data)
        //             fetch(layui.setter.baseUrl +'/config/pay_type/add', {
        //                 method: 'POST',
        //                 headers: {
        //                     'Content-Type': 'application/json'
        //                 },
        //                 body: JSON.stringify(data)
        //             })
        //                 .then(response => response.json())
        //                 .then(data => {
        //                     console.log('Response from server:', data);
        //                 })
        //                 .catch(error => {
        //                     console.error('Error:', error);
        //                 });
        //
        //             // ...
        //
        //             // 关闭弹窗
        //             layer.close(index);
        //         },
        //         btn2: function(index, layero) {
        //             // 取消按钮的回调函数
        //         }
        //     });
        // });
        // // 监听弹出框中输入框的值改变事件
        // $(document).on('input propertychange', '#productCode, #productName', function() {
        //     // 在这里可以处理输入框值改变后的逻辑
        // });


    })
</script>